<template>
  <div>
    <div>
      <TitleContainer spot="还款表现" />
      <el-table :data="repayTableData" stripe style="width: 100%">
        <el-table-column
          label="资产ID"
          prop="asset_id"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column
          label="放款时间"
          prop="asset_actual_grant_at"
          align="center"
        ></el-table-column>
        <el-table-column
          label="资产状态"
          prop="asset_status_str"
          align="center"
        ></el-table-column>
        <el-table-column
          label="应还款时间"
          prop="last_unp_due_date"
          align="center"
        ></el-table-column>
        <el-table-column label="还款期数" align="left">
          <template slot-scope="scope">
            <span>{{
              scope.row.repay_period + '/' + scope.row.asset_period_count
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="逾欠天数"
          prop="overdue_days"
          align="center"
        ></el-table-column>
        <el-table-column
          label="借款本金"
          prop="asset_principal_amount"
          align="center"
        ></el-table-column>
        <!-- <el-table-column label="待还总额" prop="" align="center" ></el-table-column> -->
        <el-table-column
          label="当期待还"
          prop="current_repay_amount"
          align="center"
        ></el-table-column>
        <el-table-column
          label="已还金额"
          prop="asset_repaid_amount"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="180px">
          <template slot-scope="scope">
            <a class="click-btn" @click="handleAssetDetail(scope.row.asset_id)"
              >查看还款明细</a
            >
          </template>
        </el-table-column>
      </el-table>
      <TitleContainer spot="逾欠情况" />

      <el-table :data="overdueTableData" stripe style="width: 100%">
        <!-- <el-table-column label="工单ID" prop="xxxx" align="center" width="80"></el-table-column> -->
        <el-table-column
          label="资产ID"
          prop="asset_id"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column
          label="应还款时间"
          prop="last_unp_due_date"
          align="center"
        ></el-table-column>
        <el-table-column
          label="应还期数"
          prop="repay_period"
          align="center"
        ></el-table-column>
        <el-table-column
          label="逾欠天数"
          prop="overdue_days"
          align="center"
        ></el-table-column>
        <el-table-column
          label="借款本金"
          prop="asset_principal_amount"
          align="center"
        ></el-table-column>
        <el-table-column
          label="逾欠总额"
          prop="overdue_total"
          align="center"
        ></el-table-column>
        <!-- <el-table-column label="逾欠本金" prop="" align="center" ></el-table-column> -->
        <el-table-column
          label="逾欠利息"
          prop="asset_interest_amount"
          align="center"
        ></el-table-column>
        <!-- <el-table-column label="逾欠罚息" prop="" align="center" ></el-table-column>
                <el-table-column label="催收状态" prop="" align="center" ></el-table-column>
                <el-table-column label="是否委外中" prop="" align="center" ></el-table-column> -->
      </el-table>

      <TitleContainer spot="已结清资产" />
      <el-table :data="finishTableData" stripe style="width: 100%">
        <el-table-column
          label="资产ID"
          prop="asset_id"
          align="center"
          width="80"
        ></el-table-column>
        <el-table-column
          label="放款时间"
          prop="asset_actual_grant_at"
          align="center"
        ></el-table-column>
        <el-table-column
          label="资产状态"
          prop="asset_status_str"
          align="center"
        ></el-table-column>
        <el-table-column
          label="应还款时间"
          prop="last_unp_due_date"
          align="center"
        ></el-table-column>
        <el-table-column label="还款期数" align="left">
          <template slot-scope="scope">
            <span>{{
              scope.row.repay_period + '/' + scope.row.asset_period_count
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="逾欠天数"
          prop="overdue_days"
          align="center"
        ></el-table-column>
        <el-table-column
          label="借款本金"
          prop="asset_principal_amount"
          align="center"
        ></el-table-column>
        <!-- <el-table-column label="待还总额" prop="" align="center" ></el-table-column> -->
        <el-table-column
          label="已还金额"
          prop="asset_repaid_amount"
          align="center"
        ></el-table-column>
        <el-table-column
          label="结清时间"
          prop="asset_payoff_at"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="180px">
          <template slot-scope="scope">
            <a class="click-btn" @click="handleAssetDetail(scope.row.asset_id)"
              >查看还款明细</a
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import TitleContainer from '@/components/title/TitleContainer'

export default {
  name: 'assetsInfo',
  data() {
    return {
      repayTableLoading: true,
      overdueTableLoading: true,
      finishTableLoading: true,
      repayTableData: [],
      overdueTableData: [],
      finishTableData: []
    }
  },
  mounted() {
    this.repayList('repay')
    this.repayList('overdue')
    this.repayList('finish')
  },
  components: {
    TitleContainer
  },
  methods: {
    // 还款明细
    handleAssetDetail(id) {
      this.$router.push({
        path: '/assets/assets/repayment/detail?assetId=' + id
      })
    },
    repayList(status) {
      this[status + 'TableLoading'] = true

      // get请求用query string parameters方式
      this.$api.userReport.info
        .repayList({
          params: {
            id: this.$route.query.uid,
            apply_code: this.$route.query.apply_code,
            status: status
          }
        })
        .then(response => {
          this[status + 'TableLoading'] = false
          this[status + 'TableData'] = response.data.data
        })
        .catch(error => {
          this[status + 'TableLoading'] = false
        })
    }
  }
}
</script>

<style scoped>
.blueFont {
  color: #006dcc;
}
.table-container {
  margin-bottom: 20px;
}
</style>
